import { Component, createRef } from "inferno";
import "KaiUI/src/components/SoftKey/SoftKey.scss";

const prefixCls = "kai-softkey";

class Button extends Component {
  constructor(props) {
    const { handleClick, icon, text, id } = props;
    super(props);
    this.id = id;
    this.handleClick = handleClick;
    this.state = {
      icon: icon,
      text: text,
    };
  }

  render() {
    let renderedIcon;
    const icon = this.state.icon;
    if (icon && icon.toString.indexOf("kai-") === -1) {
      renderedIcon = <img src={icon} width={20} height={20} alt="" />;
    } else {
      renderedIcon = <span className={icon} />;
    }
    return (
      <button
        id={this.id}
        className={`${prefixCls}-btn`}
        onClick={this.handleClick}
        data-icon={renderedIcon ? "true" : undefined}
      >
        {renderedIcon} {this.state.text}
      </button>
    );
  }
}

class SoftKey extends Component {
  handleKeyDown = (evt) => {
    switch (evt.key) {
      case "Enter":
        if (this.centerCb) this.centerCb();
        break;
      case "SoftLeft":
        if (this.leftCb) this.leftCb();
        break;
      case "SoftRight":
        if (this.rightCb) this.rightCb();
        break;
      default:
        break;
    }
  };

  constructor(props) {
    const {
      leftCb,
      rightCb,
      centerCb,
      leftText,
      rightText,
      centerText,
      leftIcon,
      rightIcon,
      centerIcon,
    } = props;
    super(props);
    this.leftCb = leftCb;
    this.centerCb = centerCb;
    this.rightCb = rightCb;

    this.state = {
      leftText: leftText,
      rightText: rightText,
      centerText: centerText,
      leftIcon: leftIcon,
      rightIcon: rightIcon,
      centerIcon: centerIcon,
    };
    this.leftRef = createRef();
    this.centerRef = createRef();
    this.rightRef = createRef();
    const softKeyAttrs = [
      {
        id: "leftSoftKey",
        text: this.state.leftText,
        icon: this.state.leftIcon,
        handleClick: () => this.handleKeyDown({ key: "SoftLeft" }),
        ref: this.leftRef,
      },
      {
        id: "centerSoftKey",
        text: this.state.centerText,
        icon: this.state.centerIcon,
        handleClick: () => this.handleKeyDown({ key: "Enter" }),
        ref: this.centerRef,
      },
      {
        id: "rightSoftKey",
        text: this.state.rightText,
        icon: this.state.rightIcon,
        handleClick: () => this.handleKeyDown({ key: "SoftRight" }),
        ref: this.rightRef,
      },
    ];
    this.buttons = softKeyAttrs.map((attrs) => <Button {...attrs} />);
  }

  componentDidMount() {
    document.addEventListener("keydown", this.handleKeyDown);
  }
  componentWillUnmount() {
    document.removeEventListener("keydown", this.handleKeyDown);
  }

  render() {
    if (this.leftRef.current)
      this.leftRef.current.setState({ text: this.state.leftText });
    if (this.centerRef.current)
      this.centerRef.current.setState({ text: this.state.centerText });
    if (this.rightRef.current)
      this.rightRef.current.setState({ text: this.state.rightText });
    return <div className={`${prefixCls} visible`}>{this.buttons}</div>;
  }
}

export default SoftKey;
